<template>
	<view class="out-box">
		<!-- 中间分类 -->
		<view class="nav">
			<view class="nav_main">
				<view class="nav_main_item" @tap="show_shop(1)">
					<span :class="display_store == 1 ? 'nav_main_item_span ative':'nav_main_item_span'">转让</span>
					<view class="nav_main_item_bottom" v-show="display_store == 1"></view>
				</view>
				<view class="nav_main_item" @tap="show_shop(2)">
					<span :class="display_store == 2 ? 'nav_main_item_span ative':'nav_main_item_span'">求租</span>
					<view class="nav_main_item_bottom" v-show="display_store == 2"></view>
				</view>
			</view>
			<!-- 列表上方的提示 -->
			<view class="two_min">审核后，预计 2分钟之内发布成功，稍后可前往首页查看发布情况</view>
		</view>
	
		<!-- 最下方的数据展示 -->
		<view class="main">
			<view class="main_lists" v-if="display_store == 1">
				<image class="kongbaiimg" src="../../static/images/kongbai3.png" v-if="page_information.shop_assemble == 0"></image>
				<scroll-view v-if="page_information.shop_assemble != 0" class="scroll-two" lower-threshold="20" scroll-y="true" @scrolltolower="load">
				<view v-for="item,index in transfer_list.value" :key="index">
					<view class="main_lists_item" @tap="todetails(item)">
						<view class="menban" v-if="item.title == null">请点击下方编辑完善店铺信息</view>
						<view style="display:flex;height: 180rpx;">
							<view class="item_left">
								<image class="item_left_img" :src=item.cover_img></image>
							</view>
							<view class="item_right">
								<view class="item_right_one"><span class="spanone" v-show="item.is_swerve==1">(急转)</span>{{item.title}}</view>
								<view style="display:flex;justify-content:space-between;">
									<view class="item_right_two">{{item.city+ ' | '+item.county+' | '+item.shop_area+"m²"}}</view>
									<view class="item_right_three">{{ ( item.rent == '' || item.rent == null ||item.rent == '面议' || item.rent =='null') ? '面议': item.rent }}
									<span class="span1" v-if="item.rent != '' && item.rent != null &&item.rent != '面议' && item.rent !='null'">元/月</span></view>
								</view>
								<view class="item_right_identifying"  v-if="item.feature_label != null&&item.feature_label != ''&& item.feature_label !='null'">
									<view v-for="item1,index1 in item.feature_label.split(',')" :key="index1">
										<view class="item_right_identifying_item">{{ item1}}</view>
									</view>
								</view>
								<!-- <span class="item_right_three">{{ ( item.rent == '' || item.rent == null ||item.rent == '面议' || item.rent =='null') ? '面议': item.rent + '/月' }}</span> -->
								<!-- <span class="item_right_five">更新于:{{ item.update_time==null?item.create_time:item.update_time }}</span> -->
							</view>
						</view>
						<!-- 中间的曝光 -->
						<view class="visits">
							<view class="information_item">
								<view class="item_top">{{item.exposure_count}}</view>
								<view class="item_bottom">曝光量</view>
							</view>
							<view class="information_item">
								<view class="item_top">{{  item.visits_count}}</view>
								<view class="item_bottom">访问量</view>
							</view>
							<view class="information_item">
								<view class="item_top">{{item.get_phone_count}}</view>
								<view class="item_bottom">电话查询</view>
							</view>
							<view class="information_item">
								<view class="item_top" :style="item.is_vip == 1? 'color:rgba(50, 176, 0, 1);':'color:rgba(255, 87, 51, 1);'">{{item.is_vip == 1 ? "已发布" : "未发布"}}</view>
								<view class="item_bottom">发布状态</view>
							</view>
						</view>

						<view class="right_center">
							<view class="item_right_one" v-if="item.is_vip==0" @tap.stop="extend_show(1,item.id,item.rent,item.shop_first_type,item.phone,item)">推广展示</view>
							<view class="item_right_thr" v-if="item.is_vip==1 &&item.is_expired == 0">{{'置顶剩余:' + item.formatter}}</view>
							<view class="item_right_one" v-if="item.is_vip==1 &&item.is_expired == 1" @tap.stop="topping(1,item.id,item.rent,item.phone,item.shop_first_type)">置顶</view>
							<view class="item_right_two" @tap.stop="editInfo(1,item)">编辑</view>
							<view class="item_right_four" @tap.stop="del_trans(item)">下架删除</view>
						</view>
					</view>
					<!-- <view class="item_hr"></view> -->
				</view>
				<view class="show_Loading" v-if="page_information.showLoading">{{page_information.showtext}}</view>
			</scroll-view>
			</view>
			<!-- 展示出租列表 -->
			<view class="main_listtwo" v-if="display_store == 2">
				<image class="kongbaiimg" src="../../static/images/kongbai3.png" v-if="page_information.rent_assemble == 0"></image>
				<scroll-view class="scroll-two" v-if="page_information.rent_assemble != 0" lower-threshold="20" scroll-y="true" @scrolltolower="loadMoretwo">
				<view v-for="item,index in rent_list.value" :key="index">
					<view class="lists_item" @tap="torent(item)">
						<view class="menban" v-if="item.title == null">请点击下方编辑完善店铺信息</view>
						<view class="item_top">
							<view class="item_left_one">
								<span class="spanone" v-show="item.is_swerve==1">（急租）</span>
								{{ item.title }}
							</view>
							<view class="item_left_two">{{item.city+ ' | '+item.county + '|'+ ((item.area_range!=null&&item.area_range!='')?item.area_range:item.shop_area)}}</view>
							<view class="item_right_identifying" v-if="item.feature_label != null && item.feature_label != ''&& item.feature_label !='null' ">
								<view v-for="item1,index in item.feature_label.split(',')" :key="index">
									<view class="item_right_identifying_item">{{ item1}}</view>
								</view> 
							</view>
							<view class="item_right_three"><span class="span1">租金预算：</span>{{ ( item.rent == '' || item.rent == null ||item.rent == '面议' || item.rent =='null') ? '面议': item.rent + '元/月' }}</view>
						</view>
							<!-- 中间的曝光 -->
						<view class="visitstwo">
							<view class="information_itemtwo">
								<view class="item_toptwo">{{item.exposure_count}}</view>
								<view class="item_bottomtwo">曝光量</view>
							</view>
							<view class="information_itemtwo">
								<view class="item_toptwo">{{  item.visits_count}}</view>
								<view class="item_bottomtwo">访问量</view>
							</view>
							<view class="information_itemtwo">
								<view class="item_toptwo">{{item.get_phone_count}}</view>
								<view class="item_bottomtwo">电话查询</view>
							</view>
							<view class="information_itemtwo">
								<view class="item_toptwo" :style="item.is_vip == 1? 'color:rgba(50, 176, 0, 1);':'color:rgba(255, 87, 51, 1);'">{{item.is_vip == 1 ? "已发布" : "未发布"}}</view>
								<view class="item_bottomtwo">发布状态</view>
							</view>
						</view>
						<view class="item_bottom">
							<view class="item_right_one" v-if="item.is_vip==0&&item.title!= null" @tap.stop="extend_show(2,item.id,item.rent,item.shop_first_type,item.phone,item)">推广展示</view>	
							<view class="item_right_thr" v-if="item.is_vip==1 &&item.is_expired == 0">{{'置顶剩余:' + item.formatter}}</view>
							<!-- <view class="item_right_one" v-if="item.is_vip==1 &&item.is_expired == 1" @tap.stop="topping(2,item.id,item.rent,item.phone,item.shop_first_type)">置顶</view> -->
							<view class="item_right_two" @tap.stop="editInfo(2,item)">编辑</view>						
							<view class="item_right_four" @tap.stop="del_rent(item)">下架删除</view>
						</view>
					</view>
				</view>
				<view class="show_Loading" v-if="page_information.showLoadingtwo">{{page_information.showtexttwo}}</view>
			</scroll-view>
			</view>
		</view>
				<!-- 会员弹窗 -->
		<!-- 普通弹窗 -->
		<uni-popup ref="popup_ipone" :is-mask-click="false" v-if="product_value.default && product_lists" :safe-area="false">
			<view class="popupipone_center">
				<view class="porop_tit">
					<view class="porop_tit_left">{{page_information.num== 1 ? '店铺转出推广展示，提升成交曝光' : '求租信息发布，快速找到理想店铺'}}</view>
					<view class="porop_tit_right" @tap="colse_popup_ipone()"></view>
				</view> 	
						<!-- 三个选择框 -->
				<view class="three_select">
					<view :class="user.top_grade == 1? 'select_active':'select_item'" @tap="onselect(1)">
						<image class="img" v-if="user.top_grade == 1"  src="../../static/images/会员.png"></image>
						<view class="text">县级收录</view>
					</view>
					<view :class="user.top_grade == 2? 'select_active':'select_item'" @tap="onselect(2)">
						<image class="img" v-if="user.top_grade == 2"  src="../../static/images/会员.png"></image>
						<view class="text">市级收录</view>
					</view>
					<view :class="user.top_grade == 3? 'select_active':'select_item'" @tap="onselect(3)">
						<image class="img" v-if="user.top_grade == 3" src="../../static/images/会员.png"></image>
						<view class="text">官方推广</view>
					</view>
				</view>
				<view class="prop_center" v-if=" product_value.required &&product_value.required[0]">
					<view class="prop_center_top">
						<view class="center_top">
							<view class="center_left">{{product_tit.title}}</view>
							<view class="center_right">{{product_value.required[0].now_money/100}}<span class="spanone">元</span></view>
						</view>
						<view class="center_butt">
							<view class="butt_left">{{ product_tit.titletwp }}</view>
							<view class="butt_right"><uni-icons type="checkbox-filled" color="rgba(255, 87, 51, 1)" size="30"></uni-icons> </view>
						</view>
					</view>
					
					<view class="prop_center_bot" v-if="user.top_grade != 3">
						<view class="center_top">
							<view class="center_left">{{'店铺置顶'}}</view>
						</view>
						<view class="select_center">
							<view v-for="item,index in product_value.requiredtwo" :key="index">
								<view :class="item.id == product_value.default.id ? 'select_center_item active' : 'select_center_item' " @tap="childList(item)"> 
									<view class="item_top">{{ item.product_name }}</view>
									<view class="item_center"><span class="span2">￥</span>{{ item.now_money/100}}</view>
									<view class="item_three" v-show="item.old_money">{{ '￥' +  item.old_money/100 }}</view>
									<view class="item_four">{{ item.product_desc }}</view>
									<image class="jiaobiao" src="../../static/images/jiaobiao.png" v-if="item.id == product_value.default.id"></image>
								</view>
							</view>
						</view>
					</view>
					<!-- 最下方的提示 -->
					<view class="propu_title">
						注：预估转让成功率仅为大数据分析结果
					</view>
				</view>
				<view class="prop_bottom">
					<view class="buttom_top">实际支付金额￥{{product_value.allmoney/100}}</view>
					<view class="buttom_btn" @tap="pay_throttle()">立即推广展示</view>
				</view>
			</view>
		</uni-popup>
			<!-- 置顶产品弹窗 -->
		<uni-popup ref="popup_two" :is-mask-click="false" v-if="zd_value.result" :safe-area="false">
			<view class="popupipone_center">
				<view class="porop_tit">
					<view class="porop_tit_left">{{page_information.num== 1 ? '店铺转出推广展示，提升成交曝光' : '求租信息发布，快速找到理想店铺'}}</view>
					<view class="porop_tit_right" @tap="colse_popup_ipone()"></view>
				</view>
				<!-- 置顶两个选择框 -->
				<view class="three_select_zd">
					<view :class="user.top_grade_zd == 1? 'select_active':'select_item'" @tap="onselect_zd(1)">
						<image class="img" v-if="user.top_grade_zd == 1"  src="../../static/images/会员.png"></image>
						<view class="text">县级置顶</view>
					</view>
					<view :class="user.top_grade_zd == 2? 'select_active':'select_item'" @tap="onselect_zd(2)">
						<image class="img" v-if="user.top_grade_zd == 2"  src="../../static/images/会员.png"></image>
						<view class="text">市级置顶</view>
					</view>
				</view>
				<view style="height:420rpx;" class="prop_center">
					<view class="prop_center_bot">
						<view class="center_top">
							<view class="center_left">店铺置顶</view>
						</view>
						<view class="select_center">
							<view v-for="item,index in zd_value.result" :key="index">
								<view :class="item.id == zd_value.default.id ? 'select_center_item active' : 'select_center_item' " @tap="zd_xz(item)"> 
									<view class="item_top">{{ item.product_name }}</view>
									<view class="item_center"><span class="span2">￥</span>{{ item.now_money/100}}</view>
									<view class="item_three" v-show="item.old_money">{{ '￥' +  item.old_money/100 }}</view>
									<view class="item_four">{{ item.product_desc }}</view>
									<image class="jiaobiao" src="../../static/images/jiaobiao.png" v-if="item.id == zd_value.default.id"></image>
								</view>
							</view>
						</view>
					</view>
					<!-- 最下方的提示 -->
					<view class="propu_title">
						注：预估转让成功率仅为大数据分析结果
					</view>
				</view>
				<view class="prop_bottom">
					<view class="buttom_top">实际支付金额￥{{page_information.paymoney/100}}</view>
					<view class="buttom_btn" @tap="pay_zd()">立即推广展示</view>
				</view>
			</view>
		</uni-popup>
		<!-- 求租支付弹框 -->
		<uni-popup ref="paypopup" :is-mask-click="false">
			<view class="popuppay">
				<view class="popuppay_imgtwo" @tap="colse_paypopup()"></view>
				<view class="main_one">
					<view class="black"></view>
					<view class="black_tit">会员套餐</view>
				</view>
				<view class="check">
					<view v-for="(item,index) in qzproduct_value.required" :key="index">
						<view :class="qzproduct_value.default.id == item.id? 'item active' : 'item '" @tap="cpdefault(item)">
							<view class="tit">{{ item.product_name }}</view>
							<view class="money">{{ '￥' + item.now_money/100 }}</view>
							<view class="jiaobiao" v-if="qzproduct_value.default.id == item.id" ></view>
						</view>
					</view>
				</view>
				<view class="main_one">
					<view class="black_tit">会员专属权益</view>
				</view>
				<view class="quanyi">
						<view class="item">
							<view class="icon_bag">
								<image class="icon" src="../../static/images/z1.png"></image>
							</view>
							<view class="bigtit">转店查看</view>
							<view class="tit">{{ qzproduct_value.dier.id == qzproduct_value.default.id?'无限次数':'每天30次' }}</view>
						</view>
						<view class="item">
							<view class="icon_bag">
								<image class="icon" src="../../static/images/q2.png"></image>
							</view>
							<view class="bigtit">出租查看</view>
							<view class="tit">{{ qzproduct_value.dier.id == qzproduct_value.default.id?'无限次数':'每天30次' }}</view>
						</view>
						<view class="item">
							<view class="icon_bag">
								<image class="icon" src="../../static/images/q3.png"></image>
							</view>
							<view class="bigtit">电话查看</view>
							<view class="tit">{{ qzproduct_value.dier.id == qzproduct_value.default.id?'无限次数':'每天30次' }}</view>
						</view>
						<view class="item">
							<view class="icon_bag">
								<image class="icon" src="../../static/images/q5.png"></image>
							</view>
							<view class="bigtit">微信添加</view>
							<view class="tit">{{ qzproduct_value.dier.id == qzproduct_value.default.id?'无限次数':'每天30次' }}</view>
						</view>
						<view class="item" v-if="qzproduct_value.dier.id == qzproduct_value.default.id">
							<view class="icon_bag">
								<image class="icon" src="../../static/images/q52.png"></image>
							</view>
							<view class="bigtit">专属客服</view>
							<view class="tit">24小时在线咨询</view>
						</view>
						<view class="item" v-if="qzproduct_value.dier.id == qzproduct_value.default.id">
							<view class="icon_bag">
								<image class="icon" src="../../static/images/q6.png"></image>
							</view>
							<view class="bigtit">精准匹配</view>
							<view class="tit">系统精准推荐</view>
						</view>
						<view class="item" v-if="qzproduct_value.dier.id == qzproduct_value.default.id">
							<view class="icon_bag">
								<image class="icon" src="../../static/images/q7.png"></image>
							</view>
							<view class="bigtit">发布置顶</view>
							<view class="tit">全平台15天置顶</view>
						</view>
				</view>
				<view class="bottom">
					<view class="bottom_one"> {{'实际支付金额￥' + qzproduct_value.allmoney/100 }}</view>
					<view class="bottom_two" @tap="pay_qz">立即购买</view>
				</view>
			</view>
		</uni-popup>

	</view> 
</template>

<script setup>
import {onGotApiData,addClick} from '../../util/api.js'
import {onShow} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		onBeforeMount,
		onMounted
	} from 'vue'
	//获取上级页面带的参数
	const props = defineProps({
		userId: String,
	});
	//  * 在组件渲染之前执行
	 onBeforeMount(() => {
		// const date1 = new Date("2023-08-24 16:50:16");
		// const date2 = new Date("2023-08-21 16:50:16");
		// const timeDiff = date1.getTime() - date2.getTime();
		// // 计算相差的天数
		// const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60));
		// console.log("shijian",daysDiff);
		console.log('组件准备渲染');
			//开发时用的,后面换成props.userId
		page_information.user_id = uni.getStorageSync('user_id');
		page_information.openid = uni.getStorageSync('open_id');
		// page_information.phone = uni.getStorageSync('phone') || '';
		page_information.channel_no = uni.getStorageSync('channel_no');
		//查询转让列表
		transfer_post();
	})
	
	//  * 在组件渲染完成后执行
	onMounted(() => {
		console.log('组件已经渲染完毕');
	})

	// 转让店鋪列表
	let transfer_list = reactive([]);
	// 求租店鋪列表
	let rent_list = reactive([]);
	// 本页面信息

	let user = reactive({
		top_grade:1,
		top_grade_zd:1,
		shop_first_type:0,
		shop_type:1,
		product_id:0,
		city:'',
		county:'',
	})
	let page_information = reactive({
		user_id:'',
		openid:'',
		num:1,
		// 选中的某一条信息的id
		id:'',
		// 最新店铺的页数
		pageone: 1,
		// 求租店铺的页数
		pagetwo: 1,
		// 出租店铺上拉加载
		showLoading: false,
		// 求租店铺上拉加载
		showLoadingtwo: false,
		// 加载文字
		showtext: '加载更多店铺中...',
		// 加载文字
		showtexttwo: '加载更多店铺中...',
		// 店铺转让总条数
		shop_assemble: 0,
		// 当前条数
		objectCount: null,
		// 求租总条数
		rent_assemble: 0,
		// 当前条数
		rent_count: null,
		// 产品id
		product_id:'',
		rent:0,
		phone:'',
		paymoney:0,
		

	})
	// 定义遮罩层的弹框初始值
	const popup_ipone = ref(null)
	const popup_two = ref(null)
	const paypopup = ref(null)
	
	// 打开手机号更改页面
	const open_ipone = () =>{
		popup_ipone.value.open('bottom')
	}
	// 关闭遮罩层
	const colse_popup_ipone = ()=>{
		product_value.default = {}
		popup_ipone.value.close()
		popup_two.value.close()
	}
	const colse_paypopup = () =>{
		paypopup.value.close()
	}

	// 控制展示的变量
	const display_store = ref(1)
	//第一次点击求租标识
	let isFirstRentClick = ref(true);
	// 点击切换展示列表
	const show_shop = (num) => {
		display_store.value = num
		if (isFirstRentClick.value) {
			rent_post();
		}
		if (num == 2) {
			isFirstRentClick.value = false
		}
	}

	// 下拉刷新店铺转让页面
	const load = () => {
		
		console.log("buchulai1")
      // 判断是否正在加载中，避免重复触发加载
      if (page_information.showLoading) {
        return;
      }
	     // 显示加载中提示
      page_information.showLoading = true
	//   计算当前数组有多少对象
	  page_information.objectCount = transfer_list.value.filter(item => typeof item === 'object').length;
	//   如果已加载全部直接返回
	  if( page_information.objectCount >= page_information.shop_assemble){
		console.log("比较",page_information.objectCount,page_information.shop_assemble)
		page_information.showtext = '没有更多数据了...'
			setTimeout(()=>{
					// 隐藏加载中提示
					page_information.showLoading = false; 
			},2000)
		return
	  }

	//   每次请求页数+1
	  page_information.pageone = page_information.pageone + 1
      // 模拟异步请求数据
      setTimeout(function(){
        // 获取到的新数据
		let params = reactive({
			page : page_information.pageone,
			size: 10,
			user_id: page_information.user_id
		})
		console.log("params",params)
		onGotApiData('/api/app/shop_transfer/page_list_my','GET',params,goto_lists)

        // 将新数据追加到数据列表中
      }, 1000);
		// 会员页面产品请求的结果
		const goto_lists = (result) => {
			console.log('分页列表',result)
			transfer_list.value.push(...result.list)
			console.log('goto_lists请求成功',transfer_list.value)
			// 隐藏加载中提示
			page_information.showLoading = false; 
		}
	}

	
	// 下拉刷新求租页面
	const loadMoretwo = () => {
      // 判断是否正在加载中，避免重复触发加载
      if (page_information.showLoadingtwo) {
        return;
      }
	     // 显示加载中提示
		 page_information.showLoadingtwo = true
		//   计算当前数组有多少对象
		page_information.rent_count = rent_list.value.filter(item => typeof item === 'object').length;
		//   如果已加载全部直接返回
	  if( page_information.rent_count >= page_information.rent_assemble){
		console.log("比较",page_information.rent_count,page_information.rent_assemble)
		page_information.showtexttwo = '没有更多数据了...'
			setTimeout(()=>{
					// 隐藏加载中提示
					page_information.showLoadingtwo = false; 
			},2000)
		return
	  }

	//   每次请求页数+1
	  page_information.pagetwo = page_information.pagetwo + 1
      // 模拟异步请求数据
      setTimeout(function(){
        // 获取到的新数据
		let params = reactive({
			page : page_information.pagetwo,
			size: 10,
			user_id: page_information.user_id
		})
		console.log("params",params)
		onGotApiData('/api/app/shop_rent/page_list_my','GET',params,goto_lists)

        // 将新数据追加到数据列表中
      }, 1000);
		// 会员页面产品请求的结果
		const goto_lists = (result) => {
			console.log('分页列表',result)
			rent_list.value.push(...result.list)
			console.log('goto_lists请求成功',rent_list.value)
			// 隐藏加载中提示
			page_information.showLoadingtwo = false; 
		}
	}


	/**
	 * 请求转让列表接口
	 */
	const transfer_post = () => {
		let params = reactive({
			page: page_information.pageone,
			size: 10,
			user_id:page_information.user_id 
		})
		console.log("params", params)
		onGotApiData('/api/app/shop_transfer/page_list_my', 'GET', params, transfer_value)
	}
	/**
	 * 转让列表请求的结果
	 */
	const transfer_value = (result) => {
		console.log('转让result', result)
		transfer_list.value = result.list
		// 总条数
		page_information.shop_assemble = result.total
		console.log('转让total', result.total)
	}
	/**
	 * 求租列表请求
	 */
	const rent_post = () => {
		let params = reactive({
			page: page_information.pagetwo,
			size: 10,
			user_id:page_information.user_id
		})
		console.log("params", params)
		onGotApiData('/api/app/shop_rent/page_list_my', 'GET', params, rent_value)
	}
	const rent_value = (result) => {
		console.log('求租', result)
		rent_list.value = result.list
		// 总条数
		page_information.rent_assemble = result.total
		console.log('求租total', result.total)
	}

	// 点击跳转到转店铺的详情
	const todetails = (item) =>{
		console.log("item",item)
		if(item.title){
			uni.navigateTo({
				url: '/pages/transfer/transfer?id=' + `${item.id}` + '&is_myshop=1',
			});
		}
	}
		// 点击跳转到求租店铺的详情
	const torent = (item) =>{
		console.log("item",item)
		if(item.title){
			uni.navigateTo({
				url: '/pages/search_shop/search_shop?id=' + `${item.id}` + '&is_myshop=1',
			});
		}
	}
	
	/**
	 * 推广展示
	 */
	const extend_show = (num, id,rent,shop_first_type,phone,item) => {
		page_information.id = id
		page_information.num = num
		user.shop_first_type = shop_first_type
		page_information.phone = phone
		console.log('点击推广展示的phone',phone)
		console.log('点击推广展示的item',item)
		if(item.city){
			user.city = item.city
			user.county = item.county
			product_tit.title = '店铺在全'+ user.county  + '范围推广展示',
			product_tit.titletwp = '点击选择下方置顶方案提升转出成功率'
		}
		if(rent == null){
			page_information.rent = 0
		}else{
			page_information.rent = rent
		}
		console.log("我是转让金额",rent)
		let url = ''
		url = "/api/app/shop_transfer/extend_show";
		if (num == 2) { //求租
		 url = "/api/app/shop_rent/extend_show";
		}
		let params = reactive({
			id: id,
			user_id: page_information.user_id 
		})
		onGotApiData(url, 'POST', params, (result) => {
			console.log("我是推广的结果",result)
			if(result.code == 401){
				console.log('我是401')
				// 请求产品
				if(page_information.num == 1){
					product()
				}else{
					qzproduct()
				}

			} else if(result.code == 2000){
				uni.showToast({
					title: '推广成功',
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'none',
					//显示持续时间为 2秒
					duration: 2000
				}) 
				// 有机会的情况再次刷新页面
				if(page_information.num == 1){
					// 再次调用接口
					transfer_post()
				}else{
					// 再次调用接口
					rent_post()
				}

			}else if(result.message){
				uni.showToast({
					title: result.message,
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'none',
					//显示持续时间为 2秒
					duration: 2000
				}) 
			}else{
				//刷新列表
				if (num == 1) {
					transfer_post()
				} else {
					rent_post();
				}
			}
		})
	}
	// 选择产品的副标题
	let product_tit = reactive({
		title:'店铺在全'+ user.county  + '范围推广展示',
		titletwp:'点击选择下方置顶方案提升转出成功率',
	}) 


	// 点击最上方三个选择框
	const onselect =(value)=>{
		if(user.top_grade == value){
			return
		}else{
			user.top_grade = value
			product()
		}
		console.log("切换县市级套餐",user.top_grade)
		// 更换标题
		if(user.top_grade == 1){
			product_tit.title = '店铺在全'+ user.county  + '范围推广展示',
			product_tit.titletwp = '点击选择下方置顶方案提升转出成功率'
		}else if(user.top_grade == 2){
			product_tit.title = '店铺在全'+ user.city + '范围同步推广展示'
			product_tit.titletwp = '点击选择下方置顶方案提升转出成功率'
		}
		else if(user.top_grade == 3){
			product_tit.title = '店铺收录置顶、官方推广认证'
			product_tit.titletwp = '县级+市级+置顶15天+官方蓝V推广认证'
		}
	}

		// 置顶两个选择框
	const onselect_zd =(value)=>{
		if(user.top_grade_zd == value){
			return
		}else{
			user.top_grade_zd = value
			page_information.paymoney = 0
			zd_value.default = {}
			zdproduct()
		}
		console.log("切换县市级套餐",user.top_grade)
		// 更换标题
	}
	// 产品的列表
	let product_lists = ref([])
	// 选中的产品
	let product_value  = reactive({
		// 头部
		required:{},
		// 下放选择
		requiredtwo:{},
		// 选中的产品
		default:{},
		// 计算总价格
		allmoney:''
	})
	// 请求产品会员的接口
	const product = () =>{
		let params = reactive({})
		params.channel_no = page_information.channel_no,
		// shop_type = shop_type
		params.money = page_information.rent,
		params.shop_type = page_information.num,
		params.shop_first_type = user.shop_first_type,
		params.top_grade = user.top_grade,
		console.log("params",params)
		onGotApiData('/api/app/product/list_v4','GET',params,product_result)
	}
	// 会员页面产品请求的结果
	const product_result = (result) => {
		// 遍历一下，会有json字符串
		// result.forEach((value,index,Array)=>{
		// 	if(value.childList){
		// 		Array[index].childList = JSON.parse(value.childList)
		// 		}
		// 	})
		console.log('我是产品结果2',result)
		product_lists.value = result
		product_value.required = result.show_list
		// 赋值最初是的总金额
		user.pay_money = product_value.required[0].now_money
		product_value.requiredtwo = result.top_list
		product_value.allmoney = Number(product_value.required[0].now_money)

		product_value.default = {}
		popup_ipone.value.open('bottom')
	}
	// 点击选择框事件
	const childList = (item) =>{
		addClick("H5会员页",item.product_name)
		console.log('e:',item);
		if(item.id == product_value.default.id){
			product_value.default = {}
			product_value.allmoney = Number(product_value.required[0].now_money)
		}else{
			product_value.default = item
			product_value.allmoney = Number(product_value.required[0].now_money) +Number(item.now_money)
		}
		console.log("我选中的是",product_value.default)
	}
	// 支付加一个节流
	let paylastClickTime =ref(0)
	// 点击支付
	const pay_throttle = () => {
		const currentTime = Date.now();
		console.log("当前时间",currentTime)
		if (currentTime - paylastClickTime.value > 1200) {
		// 执行支付
			pay()
			paylastClickTime.value = currentTime
		} else {
			paylastClickTime.value = currentTime
		}
	}
	// 支付函数
	const pay = () =>{
		addClick("小程序_会员页","确认开通会员按钮")
		// 支付时候的id拼接
		if(product_value.default.id){
				page_information.product_id = product_value.required[0].id + ',' + product_value.default.id
			}else{
				page_information.product_id =  product_value.required[0].id
			}
			let params = reactive({})
			params.channel_no = page_information.channel_no,
			params.product_id = page_information.product_id,
			params.pay_type = 'WX_XCX',
			params.wxOpenId = page_information.openid,
			params.phone = page_information.phone,
			params.shop_type = page_information.num,
			params.shop_id = page_information.id,
			params.rent = page_information.rent
			console.log("params",params)
		onGotApiData('/api/app/order/create_v2','POST',params,pay_result)
	}
	// 点击支付之后的
	const pay_result = (result) => {
		console.log('支付请求结果',result)
		// 唤起微信支付
		requestPayment(result)
	}
	// 唤起支付
	const requestPayment = (result) => {
		// 唤起微信支付
		wx.requestPayment({
			timeStamp: '' + result.timestamp, // 时间戳，自行生成
			nonceStr: '' + result.noncestr, // 随机字符串，自行生成
			package: 'prepay_id=' + result.prepayid, // 统一下单接口返回的prepay_id参数值
			signType: 'MD5', // 签名算法，固定值为MD5
			paySign: '' + result.sign, // 签名，自行生成
			success: function (res) {
			// 支付成功回调
			console.log('支付成功', res);
			uni.showToast({
					title: '支付成功',
					icon: 'none',
					duration: 2000
				});
				// 支付成功跳转到回首页
				uni.setStorageSync('refresh_index',page_information.num)
				uni.redirectTo({
					url: '/pages/my_shop/my_shop'
				});

			return
			},
			fail: function (res) {
			// 支付失败回调
			console.log('支付失败', res);
			uni.showToast({
					title: '支付失败',
					icon: 'none',
					duration: 2000
				});
			}
		});
	}

	// 请求求租产品的接口
	let qzproduct_value  = reactive({
			// 全部
			required:{},
			// 选中的产品
			default:{},
			// 计算总价格
			allmoney:'',
			dier:{}
		})
	// 求租的产品接口
	const qzproduct = () =>{
		let params = reactive({})
		params.channel_no = page_information.channel_no
		console.log("params",params)
		onGotApiData('/api/app/product/rent/v1/list','GET',params,qzproduct_result)
	}
	// 求租会员页面产品请求的结果
	const qzproduct_result = (result) => {
		console.log('我是产品结果1',result)
		// 产品请求回来之后，弹框
		paypopup.value.open('bottom')
		qzproduct_value.required = result
		// 默认选中第一个	
		qzproduct_value.default = result[0]
			// 做判断使用
			qzproduct_value.dier = result[1]
			qzproduct_value.allmoney = Number(qzproduct_value.default.now_money)
		console.log("产品",qzproduct_value)
	}
	// 点击产品选择框事件
	const cpdefault = (item) =>{
		addClick("H5会员页",item.product_name)
		qzproduct_value.default = item
		console.log("我选中的是",qzproduct_value.default)
		qzproduct_value.allmoney = Number(qzproduct_value.default.now_money)
	}
	// 点击支付
	const pay_qz = () =>{
		let params = reactive({
			product_id:qzproduct_value.default.id,
			pay_type:'WX_XCX',
			channel_no:page_information.channel_no,
			wxOpenId : page_information.openid,
			phone : page_information.phone,
			shop_type : page_information.num,
			shop_id : page_information.id,
			rent : page_information.rent
		})
		onGotApiData('/api/app/order/rent/v1/create','POST',params,pay_val)
	}
	// 创键订单返回的值
	const pay_val = (result)=>{
		console.log('支付请求结果',result)
			// 唤起微信支付
		requestPayment(result)
	}


	// 点击查看详情页面
	/**
	 * 编辑
	 * num 1:转让,2:求租
	 */
	const editInfo = (num, item) => {
		let obj = JSON.stringify(item)
		console.log('item.id',item)
		let toUrl = '/pages/edit_transference/edit_transference?id=' + item.id;
		if (num == 2) {
			//跳转到求租编辑页
			toUrl = '/pages/edit_rent/edit_rent?id=' + item.id;
		}
		uni.redirectTo({
			url: toUrl
		});
	}
	// 下架装让删除
	const del_trans = (item) =>{

		uni.showModal({
			title: '提示',
			content: '确定要删除吗？',
			success: function (res) {
				if (res.confirm) {
				console.log('用户点击确定')	
				let params = reactive({})
					params.user_id = page_information.user_id,
					params.id = item.id,

				onGotApiData('/api/app/shop_transfer/update_delist','POST',params,del_value)
				// 执行删除操作
				} else if (res.cancel) {
				console.log('用户点击取消')
				// 取消删除操作
				}
			}
		})
	}
	const del_value = (result) =>{
		console.log('删除转让',result)
		uni.showToast({
			title: '删除成功',
			//将值设置为 success 或者直接不用写icon这个参数
			icon: 'none',
			//显示持续时间为 2秒
			duration: 2000
		}) 
		page_information.pageone = 1
		// 再次调用接口
		transfer_post()
	}

		// 下架求知欲删除
	const del_rent = (item) =>{

		uni.showModal({
			title: '提示',
			content: '确定要删除吗？',
			success: function (res) {
				if (res.confirm) {
				console.log('用户点击确定')
				let params = reactive({})
					params.user_id = page_information.user_id,
					params.id = item.id,

				onGotApiData('/api/app/shop_rent/update_delist','POST',params,del_rent_value)
				// 执行删除操作
				} else if (res.cancel) {
				console.log('用户点击取消')
				// 取消删除操作
				}
			}
		})
	}
	const del_rent_value = (result) =>{
		console.log('删除求租',result)
		uni.showToast({
			title: '删除成功',
			//将值设置为 success 或者直接不用写icon这个参数
			icon: 'none',
			//显示持续时间为 2秒
			duration: 2000
		}) 

		page_information.pagetwo = 1
		// 再次调用接口
		rent_post()
	}

	// 置顶的县市选择框
	let zd_value = reactive({
		// 总、
		result:{},
		// 选中
		default:{}
	}) 
	// 置顶弹框
	const topping = (value,id,rent,phone,shop_first_type) =>{
		// 赋值给一个id创建订单时候使用
		page_information.id = id
		page_information.rent = rent
		page_information.phone = phone
		user.shop_first_type = shop_first_type
		user.shop_type = value
		zdproduct()
	}
	// 请求置顶产品会员的接口
	const zdproduct = () =>{
		let params = reactive({})
		params.channel_no = page_information.channel_no,
		params.money = page_information.rent,
		params.shop_type = user.shop_type,
		params.shop_first_type = user.shop_first_type,
		params.top_grade = user.top_grade_zd,
		console.log("params",params)
		onGotApiData('/api/app/product/top_list_v1','GET',params,zdproduct_result)
	}
	// 会员页面产品请求的结果
	const zdproduct_result = (result) => {
		zd_value.result = result
		console.log('我是产品结果',zd_value.result)
		zd_value.default = zd_value.result[0]
		page_information.paymoney = Number(zd_value.default.now_money)
		// 打卡弹框
		popup_two.value.open('bottom')
	}
	// 选中的产品
	const zd_xz =(item)=>{
		console.log('套餐的选择',item);
		zd_value.default = item
		page_information.paymoney = Number(zd_value.default.now_money)
	
	}
	// 点击置顶支付
	const pay_zd = () =>{
		const currentTime = Date.now();
		console.log("当前时间",currentTime)
		if (currentTime - paylastClickTime.value > 1200) {
		// 执行支付
			paytwo()
			paylastClickTime.value = currentTime
		} else {
			paylastClickTime.value = currentTime
		}
	}
	const paytwo = () =>{
		let params = reactive({})
		params.channel_no = page_information.channel_no,
		params.product_id = zd_value.default.id,
		params.pay_type = 'WX_XCX',
		params.wxOpenId = page_information.openid,
		params.phone = page_information.phone,
		params.shop_type = page_information.num,
		params.shop_id = page_information.id,
		params.rent = page_information.rent
		console.log("params",params)
		onGotApiData('/api/app/order/create_v2','POST',params,pay_resulttow)
	}
	const pay_resulttow = (result) =>{
		console.log('支付请求结果',result)
		// 唤起微信支付
		requestPayment(result)
	}
</script>	

<style lang="scss" scoped>
	.out-box {
		min-height: 100vh;
		width: 100vw;
		max-width: 750rpx;
		margin: 0 auto;
		overflow: hidden;
		background-color: rgb(236, 235, 235);
		width: 750rpx auto;
		position: relative;
		/* iphonex 等安全区设置，底部安全区适配 */
        /* #ifndef APP-NVUE */
        margin-bottom: 0;
        margin-bottom: constant(safe-area-inset-bottom);
        margin-bottom: env(safe-area-inset-bottom);
        /* #endif */
		// 上方三个导航栏
		.nav {
			width: 100%;
			height: 144rpx;
			background-color: rgb(236, 235, 235);
			position: fixed;
			// top: 90rpx;
			z-index: 999;
			// border: 1px solid black;
			.nav_main {
				width: 750rpx;
				height: 90rpx;
				background-color: rgb(251, 250, 250);
				// margin-top: 100rpx;
				// border-radius: 20rpx;
				// padding-top: 10rpx;
				// padding-bottom: 10rpx;
				margin: 0 auto;
				display: flex;
				justify-content: space-around;

				.nav_main_item {
					width: 180rpx;
					height: 90rpx;
					// background-color: pink;
					text-align: center;

					// padding-top: 10rpx;
					// border-bottom: 10rpx solid orange;
					.nav_main_item_span {
						line-height: 30px;
						font-size: 17px;
						font-weight: 400;
					}

					.ative {
						color: rgb(255, 114, 64);
					}

					.nav_main_item_bottom {
						width: 140rpx;
						height: 10rpx;
						background-color: rgb(255, 114, 64);
						margin-left: 20rpx;
						border-radius: 4rpx;
						// box-shadow: 0 0 20rpx rgb(255, 114, 64);
					}
				}
			}
			.two_min{
				width: 750rpx;
				height: 40rpx;
				margin: 0 auto;
				margin-top: 10rpx;
				margin-bottom: 10rpx;
				background-color: rgba(252, 184, 169, 0.3);
				color: rgba(255, 87, 51, 1);
				font-size: 25rpx;
				text-align: center;
				line-height: 40rpx;
				// border: 1px solid black;
			}
		}

		// 中间的内容
		.main {
			margin-top: 136rpx;
			width: 100%;
			// min-height: 60vh;
			font-family: '思源黑体';
			background-color: rgb(236, 235, 235);
			display: flex;
			justify-content: center;
			.main_lists {
				width: 750rpx;
				// height: 100rpx;
				background-color: rgb(236, 235, 235);
				.kongbaiimg{
					width: 720rpx;
					background-size: cover;
				}
				.main_lists_item {
					width: 720rpx;
					// height: 270rpx;
					background-color: #fff;
					border-radius:10rpx;
					margin: 0 auto;
					margin-top: 14rpx;
					position: relative;
					.menban{
						width: 720rpx;
						height: 180rpx;
						z-index: 99;
						position: absolute;
						top: 0;
						left: 0;
						border-radius: 10rpx;
						background-color: rgba(0, 0, 0, 0.35);
						color: #fff;
						font-size: 38rpx;
						line-height: 180rpx;
						text-align: center;
					}
					.item_left {
						width: 160rpx;
						height: 160rpx;
						// border: 1px solid black;
						margin: 10rpx 0 0  10rpx;
						// background-image: url(https://img.72qq.com/file/202007/24/aed12b08ae.jpg);
						// background-size: 100% 100%;
						.item_left_img {
							height: 160rpx;
							width: 160rpx;
							border-radius: 20rpx;

						}
					}
					.item_right {
						width: 530rpx;
						height: 160rpx;
						margin-left: 10rpx;
						// border: 1px solid black;
						.item_right_one {
							width: 500rpx;
							font-size: 34rpx;
							margin-left: 15rpx;
							margin-top: 15rpx;
							font-weight: 600;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							.spanone{
								color:rgba(255, 87, 51, 1);
							}
						}

						.item_right_two {
							font-size: 24rpx;
							margin:6rpx  0 0 15rpx;
							line-height: 50rpx;
							color:rgba(143, 143, 143, 1);
						}
						.item_right_three {
							font-size: 32rpx;
							// margin-top: 10rpx;
							line-height: 60rpx;
							color: rgba(255, 87, 51, 1);
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							.span1{
								font-size:26rpx;
							}
						}
						.item_right_identifying {
							width: 500rpx;
							height: 34rpx;
							display: flex;
							margin-top: 2rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							// margin-bottom: 16rpx;
							// border: 1px solid black;
							.item_right_identifying_item {
								// width: 120rpx;
								height: 30rpx;
								font-size: 12px;
								font-weight: 500;
								line-height: 30rpx;
								padding-left: 5rpx;
								padding-right: 5rpx;
								color: rgba(102, 102, 102, 1);
								margin-left: 14rpx;
								text-align: center;
								background-color:rgba(240, 243, 245, 1);
								// border: 1px solid rgba(255, 141, 26, 1);
								border-radius: 10rpx;
							}
						}
						.item_right_five {
							font-size: 12px;
							margin-left: 30rpx;
							color: rgb(163, 169, 175);
						}
					}
				}
				.visits{
					width: 700rpx;
					height: 120rpx;
					margin: 0 auto;
					// margin-top: 20rpx;						
					// border:1px solid black;
					border-radius: 10rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					background-color: rgba(246, 247, 251, 1);
					display: flex;
					justify-content:space-between;

					.information_item{
						width: 170rpx;
						height: 110rpx;
						// background-color: pink;
						font-size: 24rpx;
						padding-top: 14rpx;
						color: #666666;
						text-align: center;
		
						.item_top{
							width: 170rpx;
							height: 50rpx;
							font-size: 32rpx;
							font-weight: 700;
							color: rgba(56, 56, 56, 1);
							line-height: 50rpx;
						}
						.item_bottom{
							width: 170rpx;
							height: 44rpx;
							margin-top: 16rpx;
							color:rgba(128, 128, 128, 1);
							font-weight: 500;
						}
					}
				}
				.right_center {
					width: 720rpx;
					height: 70rpx;
					margin-top:16rpx;
					// border: 1px solid #F5F5F5;
					display: flex;
					justify-content: flex-end;
					.item_right_one {
						width: 160rpx;
						height: 50rpx;
						//margin: 10rpx 0 10rpx 370rpx;
						background-color: rgba(255, 87, 51, 1);
						padding: 0 6rpx 0 6rpx;
						border-radius: 10rpx;
						color: rgba(255, 255, 255, 1);
						font-size: 26rpx;
						line-height: 50rpx;
						text-align: center;
						margin-right: 10rpx;
					}
					.item_right_two {
						width: 160rpx;
						height: 50rpx;
						//margin: 10rpx 0 10rpx 30rpx;
						border: 1px solid rgba(255, 87, 51, 1);
						background-color:rgba(255, 238, 235, 1);
						border-radius: 10rpx;
						color: rgba(255, 87, 51, 1);
						// font-size: 26rpx;
						line-height: 50rpx;
						text-align: center;
						margin-right: 10rpx;
						// position: absolute;
						// top: 10rpx;
						// right: 0;
					}
					.item_right_thr {
						height: 50rpx;
						color: rgba(143, 143, 143, 1);
						font-size: 26rpx;
						line-height: 60rpx;
						text-align: center;
						margin-right: 130rpx;
					}
					.item_right_four{
						width: 160rpx;
						height: 50rpx;
						//margin: 10rpx 0 10rpx 30rpx;
						border: 1px solid rgba(166, 166, 166, 1);
						// background-color:rgba(255, 238, 235, 1);
						border-radius: 10rpx;
						color: rgba(166, 166, 166, 1);
						// font-size: 26rpx;
						line-height: 50rpx;
						text-align: center;
						margin-right: 10rpx;
						// position: absolute;
						// top: 10rpx;
						// right: 0;
					}
				}

				.item_hr {
					width: 700rpx;
					height: 2rpx;
					margin: 0 auto;
					border-top: 1px dashed rgba(207, 204, 204, 1);
				}
			}

			// 搜索店铺
			.main_listtwo {
				width: 750rpx;
				background-color: rgb(236, 235, 235);
				font-family: '思源黑体';
				.kongbaiimg{
					width: 740rpx;
					background-size: cover;
				}
				.lists_item {
					width: 740rpx;
					// height: 220rpx;
					background-color: #fff;
					margin: 0 auto;
					margin-top: 16rpx;
					// display: flex;
					border-radius: 20rpx;
					position: relative;
					.menban{
						width: 740rpx;
						height: 100rpx;
						z-index: 99;
						position: absolute;
						top: 0;
						left: 0;
						border-radius: 10rpx;
						background-color: rgba(0, 0, 0, 0.35);
						color: #fff;
						font-size: 38rpx;
						line-height: 100rpx;
						text-align: center;
					}
					.item_top {
						width: 740rpx;
						margin-left: 10rpx;
						// border:1px solid black;
						.item_left_one {
							width: 600rpx;
							margin: 16rpx 0 0 0rpx;
							line-height: 60rpx;
							font-size: 32rpx;
							font-weight: 700;
							color: rgba(46, 46, 46, 1);
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							.spanone {
								color: rgba(255, 87, 51, 1);
							}
						}

						.item_right_identifying {
							width: 720rpx;
							height: 34rpx;
							display: flex;
							margin: 10rpx 0 2rpx 10rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;

							// border: 1px solid black;
							.item_right_identifying_item {
								// width: 120rpx;
								height: 30rpx;
								font-size: 12px;
								font-weight: 500;
								line-height: 30rpx;
								padding-left: 5rpx;
								padding-right: 5rpx;
								color: rgba(102, 102, 102, 1);
								margin-left: 14rpx;
								background-color:rgba(240, 243, 245, 1);
								text-align: center;
								// border: 1px solid rgba(255, 141, 26, 1);
								border-radius: 10rpx;
							}
						}

						.item_left_two {
							// border:1px solid black;
							font-size: 24rpx;
							margin:6rpx  0 0 20rpx;
							line-height: 40rpx;
							color:rgba(143, 143, 143, 1);
						}

						.item_right_three {
							color: rgba(255, 87, 51, 1);
							font-size: 30rpx;
							margin-left: 20rpx;
							line-height: 60rpx;
							text-overflow: ellipsis;
							font-weight:600;
							overflow: hidden;
							white-space: nowrap;
							.span1{
								font-size: 26rpx;
								color:rgba(128, 128, 128, 1);
								font-weight:400;
							}
						}
					}
				}
				.visitstwo{
					width: 710rpx;
					height: 120rpx;
					margin: 0 auto;
					// margin-top: 20rpx;						

					border-radius: 10rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					background-color: rgba(246, 247, 251, 1);
					display: flex;
					justify-content:space-between;

					.information_itemtwo{
						width: 170rpx;
						height: 110rpx;
						// background-color: pink;
						// border:1px solid black;
						font-size: 24rpx;
						padding-top: 14rpx;
						color: #666666;
						text-align: center;
		
						.item_toptwo{
							width: 170rpx;
							height: 50rpx;
							font-size: 32rpx;
							font-weight: 700;
							color: rgba(56, 56, 56, 1);
							line-height: 50rpx;

						}
						.item_bottomtwo{
							width: 170rpx;
							height: 44rpx;
							margin-top: 16rpx;
							color:rgba(128, 128, 128, 1);
							font-weight: 500;

						}
					}
				}
				.item_bottom {
					// border:1px solid black;
					width: 730rpx;
					height: 80rpx;
					font-size: 28rpx;
					margin-top:10rpx;
					color: #F5F5F5;
					text-align: center;
					line-height: 50rpx;
					display: flex;
					justify-content: flex-end;
					.item_right_one {
						width: 150rpx;
						height: 50rpx;
						padding: 0 6rpx 0 6rpx;
						margin: 10rpx 10rpx 0 0;
						border-radius: 10rpx;
						background: rgba(255, 87, 51, 1);
					}

					.item_right_two {
						width: 150rpx;
						height: 50rpx;
						margin: 10rpx 10rpx 0 0;
						border-radius: 10rpx;
						border: 1px solid rgba(255, 87, 51, 1);
						background-color:rgba(255, 238, 235, 1);
						border-radius: 10rpx;
						color: rgba(255, 87, 51, 1);
					}
					.item_right_thr {
						height: 50rpx;
						color: rgba(143, 143, 143, 1);
						font-size: 26rpx;
						line-height: 70rpx;
						text-align: center;
						margin-right: 120rpx;
					}
					.item_right_four{
						width: 160rpx;
						height: 50rpx;
						//margin: 10rpx 0 10rpx 30rpx;
						border: 1px solid rgba(166, 166, 166, 1);
						// background-color:rgba(255, 238, 235, 1);
						border-radius: 10rpx;
						color: rgba(166, 166, 166, 1);
						// font-size: 26rpx;
						line-height: 50rpx;
						text-align: center;
						margin: 10rpx 10rpx 0 0;
						// position: absolute;
						// top: 10rpx;
						// right: 0;
					}
				}

				.item_hr {
					width: 700rpx;
					height: 2rpx;
					margin: 0 auto;
					border-top: 1px dashed rgba(207, 204, 204, 1);
				}
			}
		}
	.scroll-two{
		width: 100%;
		height: calc(100vh - 136rpx);
	}
	.show_Loading{
		height: 80rpx;
		text-align: center;
		// line-height: 80rpx;
	}
}
	// 弹出层的样式
	.popupipone_center{
		width: 750rpx;
		margin: 0 auto;
		border-radius: 30rpx 30rpx 0px 0px;
		background:rgba(242, 226, 196, 1);
		.porop_tit{
			width: 750rpx;
			height: 70rpx;
			padding: 26rpx 0 0 0;
			display: flex;
			.porop_tit_left{
				width: 600rpx;
				height: 70rpx;
				margin-left: 30rpx;
				font-size: 34rpx;
				font-weight: 600;
				line-height: 60rpx;
				color: rgba(255, 141, 26, 1);
			}
			.porop_tit_right{
				width: 60rpx;
				height: 70rpx;
				margin-left: 50rpx;
				background: url(../../static/images/7.png) no-repeat;
			}	
		}
		.three_select{
			width: 710rpx;
			height: 90rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			// border: 1px solid black;
			background:rgba(242, 226, 196, 1);
			display: flex;
			.select_item{
				width: 240rpx;
				height: 100rpx;
				// border: 1px solid black;
				display: flex;
				justify-content: space-around;
				.text{
					width: 160rpx;
					font-size: 34rpx;
					font-weight: 700;
					line-height: 50rpx;
					margin:20rpx 0 0 0;
					// border: 1px solid black;
					color: #fff;
					text-align: center;
				}
			}
			.select_active{
				width: 270rpx;
				height: 95rpx;
				margin-top: -5rpx;
				border-top-right-radius: 20rpx;
				border-top-left-radius: 20rpx;
				background: rgba(255, 255, 255, 1);
				display: flex;
				.img{
					width: 48rpx;
					height: 48rpx;
					margin: 25rpx 5rpx 0 35rpx;
				}
				.text{
					width: 160rpx;
					font-size: 34rpx;
					font-weight: 700;
					line-height: 50rpx;
					margin-top:25rpx;
					color: rgba(234, 158, 73, 1);
		
				}
			}
		}
		.three_select_zd{
			width: 710rpx;
			height: 90rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			// border: 1px solid black;
			background:rgba(242, 226, 196, 1);
			display: flex;
			.select_item{
				width: 355rpx;
				height: 90rpx;
				// border: 1px solid black;
				display: flex;
				justify-content: space-around;
				.text{
					width: 160rpx;
					font-size: 34rpx;
					font-weight: 700;
					line-height: 50rpx;
					margin:20rpx 0 0 0;
					// border: 1px solid black;
					color: #fff;
					text-align: center;
				}
			}
			.select_active{
				width: 355rpx;
				height: 95rpx;
				margin-top: 6rpx;
				border-top-right-radius: 20rpx;
				border-top-left-radius: 20rpx;
				background: rgba(255, 255, 255, 1);
				display: flex;
				.img{
					width: 48rpx;
					height: 48rpx;
					margin: 25rpx 5rpx 0 75rpx;
				}
				.text{
					width: 160rpx;
					font-size: 34rpx;
					font-weight: 700;
					line-height: 50rpx;
					margin-top:25rpx;
					color: rgba(234, 158, 73, 1);
				}
			}
		}
		.prop_center{
			width: 710rpx;
			// height: 600rpx;
			margin: 0 auto;
			// margin-top: 30rpx;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			background: rgba(255, 255, 255, 1);
			.prop_center_top{
				width: 750rpx;
				height: 150rpx;
				padding-top: 10rpx;
				border-bottom: 2rpx solid rgba(229, 229, 229, 1);
				.center_top{
					padding-left: 20rpx;
					display: flex;
					.center_left{
						width: 500rpx;
						height: 70rpx;
						font-size:32rpx;
						font-weight: 600;
						line-height: 70rpx;
						color: rgba(0, 0, 0, 1);
					}
					.center_right{
						width: 180rpx;
						height: 70rpx;
						margin-left: 50rpx;
						font-size: 36rpx;
						font-weight: 700;
						line-height: 70rpx;
						color: rgba(255, 87, 51, 1);
						.spanone{
							font-size: 26rpx;
							font-weight: 400;
							color: rgba(255, 87, 51, 1);
						}
					}
				}
				.center_butt{
					padding:10rpx 0 0 20rpx;
					display: flex;
					.butt_left{
						width: 500rpx;
						height: 60rpx;
						font-size: 24rpx;
						font-weight: 400;
						line-height: 60rpx;
						color: rgba(128, 128, 128, 1);
					}
					.butt_right{
						margin-left: 70rpx;
					}
				}
			}
			.prop_center_bot{
				width: 750rpx;
				height: 310rpx;
				.center_top{
					padding-left: 20rpx;
					margin-top: 10rpx;
					// display: flex;
					.center_left{
						width: 200rpx;
						height: 70rpx;
						font-size:32rpx;
						font-weight: 600;
						line-height: 70rpx;
						color: rgba(0, 0, 0, 1);
					}
				}
				// 四个选着框
				.select_center{
					width: 710rpx;
					height: 260rpx;
					padding-top: 10rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-around;

					.select_center_item{
						width: 200rpx;
						height: 260rpx;
						margin-right: 10rpx;
						border-radius: 16rpx;
						background: linear-gradient(180deg, rgba(255,228,228,0) 0%, #FFE1E1 100%);
						box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(0,0,0,0.12);
						border: 1px solid rgba(213, 209, 206, 1);
						position: relative;
						.item_top{
							width: 200rpx;
							height: 30rpx;
							text-align: center;
							margin-top: 28rpx;
							line-height: 30rpx;
							font-size: 26rpx;
							font-weight: 600;
							color: rgb(0, 0, 0);
						}
						.item_center{
							width: 200rpx;
							height: 70rpx;
							margin-top: 10rpx;
							text-align: center;
							line-height: 80rpx;
							font-size: 54rpx;
							font-weight: 700;
							color: #F50909 ;
							.span2{
								font-size: 30rpx;
							}
						}
						.item_three{
							width: 200rpx;
							height: 30rpx;
							font-size: 24rpx;
							margin-top: 2rpx;
							text-align: center;
							// font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							text-decoration: line-through;
							line-height: 50rpx;
							color: #999 ;
						}
						.item_four{
							width: 160rpx;
							height: 50rpx;
							margin:  0 auto;
							margin-top: 16rpx;
							text-align: center;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							line-height: 50rpx;
							font-size: 20rpx;
							color: rgb(125, 120, 120);
							line-height: 30rpx;
						}
						.jiaobiao{
							width:48rpx;
							height: 48rpx;
							border-radius: 8rpx;
							background-size: cover;
							position: absolute;
							left: 152rpx;
							top: 214rpx;
						}
					}
					.active{
						background: rgb(252, 227, 221);
						border: 1px solid rgba(255, 87, 51, 1);
						.select_center_item_buttom{
							// background: rgba(255, 87, 51, 1);
							// color: rgba(255, 255, 255, 1);
							.select_item_right{
								color: rgba(255, 87, 51, 1) !important;
							}
						}
					}
				}
			}
			.propu_title{
				width: 600rpx;
				height: 50rpx;
				margin: 0 auto;
				margin-top: 60rpx;
				// border: 1px solid black;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 50rpx;
				color: rgb(131, 127, 123);
				text-align: center;

			}
		}
		.prop_bottom{
			width: 750rpx;
			height: 100rpx;
			border: 1rpx solid rgba(242, 226, 196, 1);
			margin-top: 10rpx;
			display: flex;
			.buttom_top{
				width: 450rpx;
				height: 120rpx;
				background-color: #F5F5F5;
				font-size: 30rpx;
				line-height: 100rpx;
				color: rgba(255, 87, 51, 1);
				text-align: center;
			}
			.buttom_btn{
				width: 300rpx;
				height: 120rpx;
				margin: 0 auto;
				// margin-top: 60rpx;
				// margin-bottom: 20rpx;
				border-radius: 14rpx;
				background: rgba(255, 87, 51, 1);
				font-size: 30rpx;
				font-weight: 600;
				text-align: center;
				line-height: 100rpx;
				color: rgba(255, 255, 255, 1);

			}
		}
	}
	// 求租产品的弹框
	.popuppay{
		width: 750rpx;
		// height: 00rpx;
		background-color: rgba(255, 255, 255, 1);
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		position: relative;
		.popuppay_imgtwo{
			width: 48rpx;
			height: 48rpx;
			border-radius: 40rpx;
			background: url(../../static/images/chacha.png) no-repeat;
			background-size: 100% 100%;
			position: absolute;
			left: 666rpx;
			top: 20rpx;

		}
		.main_one{
				width: 750rpx;
				height: 100rpx;
				// border: 1px solid black;
				display: flex;
				.black{
					width: 6rpx;
					height: 30rpx;
					background-color: rgb(241, 17, 17);
					border-radius: 4prx;
					margin: 40rpx 0 0 20rpx;
				}
				.black_tit{
					width: 500rpx;
					height: 50rpx;
					margin: 30rpx 0 0 10rpx;
					font-size: 32rpx;
					font-weight: 600;
					line-height: 50rpx;
					color: rgba(0, 0, 0, 1);
				}
			}
		.check{
			width: 750rpx;
			height: 90rpx;
			// border: 1px solid black;
			display: flex;
			justify-content: space-around;
			.item{
				width: 340rpx;
				height: 90rpx;
				box-shadow: 4px 4px 14px 2px rgba(0, 0, 0, 0.25);
				border-radius: 10rpx;
				border: 1px solid #fff;
				position: relative;
				display: flex;
				.tit{
					width: 190rpx;
					height: 90rpx;
					font-size: 30rpx;
					font-weight: 400;
					line-height: 90rpx;
					color: rgba(245, 164, 71, 1);
					text-align: center;

				}
				.money{
					width: 130rpx;
					height: 90rpx;
					font-size: 38rpx;
					font-weight: 900;
					line-height: 90rpx;
					color: rgba(56, 56, 56, 1);
					text-align: center;
				}
				.jiaobiao{
					width: 36rpx;
					height: 36rpx;
					// border: 1px solid black;
					background:url(../../static/images/jiaobiao.png);
					background-size: 100%;
					position: absolute;
					top: 54rpx;
					left: 304rpx;

				}
			}
			.active{
				border: 1px solid rgba(255, 87, 51, 1);
				background: linear-gradient(90deg, rgba(251, 225, 190, 1) 0%, rgba(252, 217, 217, 0.22) 100%);
				.money{
						color:rgba(255, 87, 51, 1);
				}
			}
			// 选中之后展示的图标

		}
		.quanyi{
			width: 720rpx;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			.item{
				width: 148rpx;
				height: 200rpx;
				margin: 12rpx;
				// border: 1px solid black;
				.icon_bag{
					width: 100rpx;
					height: 100rpx;
					margin: 0 auto;
					border-radius: 4rpx;
					background-color:rgba(250, 225, 220, 1);
					.icon{
						width: 70rpx;
						height: 70rpx;
						margin: 15rpx;
					}
				}
				.bigtit{
					width: 148rpx;
					height: 40rpx;
					font-size: 14px;
					font-weight: 700;
					margin-top: 8rpx;
					letter-spacing: 1px;
					line-height: 20.27px;
					color: rgba(0, 0, 0, 1);
					text-align: center;
					vertical-align: top;
				}
				.tit{
					width: 158rpx;
					height: 20rpx;
					font-size: 22rpx;
					font-weight: 400;
					margin-top: 4rpx;
					line-height: 30rpx;
					color: rgba(0, 0, 0, 1);
					text-align: center;

				}
			}
		}
		.bottom{
			width: 750rpx;
			height: 100rpx;
			border-top: 1px solid rgb(167, 164, 164);
			display: flex;
			.bottom_one{
				width: 450rpx;
				height: 100rpx;
				// border: 1px solid black;
				color: rgba(255, 87, 51, 1);
				text-align: center;
				line-height: 100rpx;
				font-size: 26rpx;
			}
			.bottom_two{
				width: 300rpx;
				height: 100rpx;
				background-color: #F50909;
				color: #fff;
				text-align: center;
				line-height: 100rpx;
				font-size: 30rpx;
			}
		}
	}
</style>
